<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../00-source/jquery.min.js"></script>
</head>

<body>
    <button id="get">get</button>
    <button id="post">post</button>
    <script>
        /*
            $.ajax({})即可调用jQuery的ajax封装请求，里面的字段有很多，我们一个一个说
                type: 这个是请求的方式，GET和POST，不过一般可以不写。
                method: 请求的方法，不写默认是get，如果是post,put,delete则需要手动写上去
                url: 请求的地址，这个一般是必填的
                async: 这个是一个标识，标识是否异步。取值为布尔值，一般不用写，因为没听说过请求还有不异步的
                data: 请求要携带的参数,一般用{}包裹起来
                headers: 请求头，也是用{}包裹起来。一般不会写这个东西
                dataType: 请求所返回数据的类型，一般不建议写，因为是会自动解析的。
                success: 成功的标识，取值为回调函数
                error: 失败的标识，取值为回调函数
                timeout: 超时时间限制，超过了这个值就算超时。1000为1s，如果你要写不建议写的太短。
            $.ajax()是支持promise的，所以我们可以.then().catch()
            

            为了方便开发，其实jQuery也提供了$.get()和$.post()，这两个函数可以有三个参数
                第一个参数：请求的地址
                第二个参数：请求的参数，一般用{}包着
                第三个参数：请求成功的回调
            这两个也是支持promise的，也可以then，catch
        */

        $('#get').click(() => {
            $.ajax({
                url: "http://localhost:9090",
                // 成功的回调
                success: function (response) {
                    console.log(response);
                },
                data: {
                    username: 'mikaisa-get'
                },
                // 失败的回调
                error: (err) => {
                    console.error(err);
                }
            });
        })

        $('#post').click(async () => {
            let res = await $.ajax({
                method: 'POST',
                url: "http://localhost:9090",
                data: {
                    username: 'mikaisa-post'
                },
            })
            console.log(res);
        })
    </script>
</body>

</html>